
<template>
    <div class="center_center flexv">
        <!-- 头部 -->
        <!-- <div class="topper tc white">个人中心</div> -->

        <!-- 个人信息 -->
        <!-- 已登录 -->
        <div class="top flex" v-if="hasUserInfo">
            <div class="user_ico flex">
                <img :src="userInfo.avatar" alt="">
            </div>

            <div class="user_infos flex1 flexv jus-c">
                <div class="name_box flex">
                    <span class="white oneline">{{userInfo.username ? userInfo.username : '未设置昵称'}}</span>
                </div>

                <div class="tel ali-c mt2">
                    <span @click.stop="toBind">{{userInfo.mobile}}</span>
                    <span class="level" v-if="userInfo.distributor == 0">普通会员</span>
                    <span class="level" v-if="userInfo.distributor == 1 && userInfo.distributor_name == 0">普通分销</span>
                    <span class="level" v-if="userInfo.distributor == 2">旅游达人</span>
                    <span class="level" v-if="userInfo.distributor == 3">省级代理</span>
                    <span class="level" v-if="userInfo.distributor == 4">市级代理</span>
                    <span class="level" v-if="userInfo.distributor == 5">县级代理</span>
                    <span class="level" v-if="userInfo.distributor != 0 && userInfo.distributor_name != '0'">{{userInfo.distributor_name}}</span>
                </div>
            </div>

        </div>

        <!-- 订单栏目 -->
        <div class="order_box">
            <div class="order_acts flexv">
                <div class="topic jus-b ali-c">
                    <span>核销订单</span>
                    <span class="all" @click="toOrder(1)">全部></span>
                </div>

                <div class="acts flex1 flex">
                    <div class="act flex1 flexv flexc icon-da" @click="toOrder(10)">
						<i class="icon-xiao" v-if="fukuan_1 > 0">{{fukuan_1 &lt; 10?fukuan_1:'...'}}</i>
                        <img src="@/assets/my_pendingpayment.png" alt="">
                        <p class="tc">待付款</p>
                    </div>
                    <div class="act flex1 flexv flexc icon-da" @click="toOrder(20)">
						<i class="icon-xiao" v-if="fukuan_2 > 0">{{fukuan_2 &lt; 10?fukuan_2:'...'}}</i>
                        <img src="@/assets/my_tobeshipped.png" alt="">
                        <p class="tc">待消费</p>
                    </div>
                    <div class="act flex1 flexv flexc icon-da" @click="toOrder(40)">
						<i class="icon-xiao" v-if="fukuan_3 > 0">{{fukuan_3 &lt; 10?fukuan_3:'...'}}</i>
                        <img src="@/assets/my_evaluate.png" alt="">
                        <p class="tc">待评价</p>
                    </div>
                    <div class="act flex1 flexv flexc icon-da" @click="toOrder(50)">
						<!-- <i class="icon-xiao" v-if="fukuan_4 > 0">{{fukuan_4 &lt; 10?fukuan_4:'...'}}</i> -->
                        <img src="@/assets/my_completed.png" alt="">
                        <p class="tc">已完成</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="pd3 flexv">
            <!-- 分销中心 -->
            <div class="distribution flexv">
                <div class="topic jus-b ali-c">
                    <span>我的功能</span>
                </div>

                <div class="acts flex1 flex">
                    <div class="flex1 act flexv flexc" @click="toDis(1)">
                        <img src="@/assets/my_assemble.png" alt="">
                        <p class="tc">我的拼团</p>
                    </div>
                    <div class="flex1 act flexv flexc" @click="toDis(2)">
                        <img src="@/assets/my_consignee.png" alt="">
                        <p class="tc">物流订单</p>
                    </div>
                    <div class="flex1 act flexv flexc" @click="toDis(3)">
                        <img src="@/assets/my_integral.png" alt="">
                        <p class="tc">积分商城</p>
                    </div>
                    <div class="flex1 act flexv flexc" @click="toDis(4)">
                        <img src="@/assets/my_agent.png" alt="">
                        <p class="tc">分销中心</p>
                    </div>
                </div>
            </div>

            <!-- 邀请好友 -->
            <div class="invite flex" v-if="userInfo.distributor != 2" @click="toTravel">
                <img src="@/assets/banne.png" alt="">
            </div>

            <!-- 更多服务 -->
            <div class="services flexv">
                <div class="title ali-c">更多服务</div>

                <div class="services_list flex-wrap">
                    <div class="service flexv flexc" v-for="(item,index) in serviceList" :key="index" @click="toIndex(item.id)">
                        <!-- <img src="@/assets/goods.png" alt=""> -->
                        <img :src="item.image" alt="">
                        <p class="tc">{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
		<div class="footer-text">
			嘉瑞科技提供技术支持
		</div>
        <van-popup v-model="bindtel" class="bind_tel_box flex" >
            <div class="bind_tel flexv flexc">
                <p class="title white">绑定手机号</p>

                <div class="bind_init ali-c">
                    <span class="name">手机号</span>
                    <input type="tel" class="flex1" placeholder="请输入手机号" maxlength="11" v-model="tel">
                </div>
                <div class="bind_init ali-c">
                    <span class="name">验证码</span>
                    <input type="tel" class="flex1" placeholder="请输入验证码" maxlength="8" v-model="code">
                    <div class="get_code tc" @click="getCode">{{msg}}</div>
                </div>

                <div class="bind_btn tc" @click="bindTel">确定</div>
            </div>
        </van-popup>

        <pubFoot index="center" :cartNumber="cartNumber"></pubFoot>
    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import pubFoot from '@/components/foot';
import { Toast, Dialog } from 'vant';
import { centers, bindmobile, sendMessage,getOrderNum } from '@/request/api';
import { u_Reg } from '@/config/utils.js';
Vue.use(Toast )
export default {
    data (){
        return{
            cartNumber: 0, // 购物车数量
            hasUserInfo: false, // 是否有用户信息
            userInfo: '', // 用户信息
            serviceList: [
                {id: 1,name: '优惠券',image: require('@/assets/my_coupon.png')},
                {id: 2,name: '我的收藏',image: require('@/assets/my_collection.png')},
                {id: 3,name: '收货地址',image: require('@/assets/my_address.png')},
                {id: 4,name: '意见反馈',image: require('@/assets/my_opinion.png')},
                {id: 5,name: '联系客服',image: require('@/assets/my_service_normat.png')},
                {id: 6,name: '关于我们',image: require('@/assets/my_about_us.png')},
            ], // 更多服务列表
            kefu: '', // 
            bindtel: false, // 绑定手机号弹窗
            tel: '', // 手机号
            code: '', // 验证码
            msg: '获取验证码',
            timmer: '', // 计时器
			once: true, // 复制重复提交
			oncea: true, // 复制重复提交
			hasMobile: false, // 是否绑定手机号
			fukuan_1:0,
			fukuan_2:0,
			fukuan_3:0,
			fukuan_4:0
        }
    },
    created(){
		let user = JSON.parse(localStorage.getItem('userInfo'))
		if(user && user.mobile){
		    this.hasMobile = true;
		}else{
		    this.hasMobile = false;
		}
        this.getData();
        if(localStorage.getItem('cartNums')){
            this.cartNumber = Number(localStorage.getItem('cartNums'));
        }
		this.getOrderNum();
    },
    beforeRouteLeave(to,from,next){
        clearInterval(this.timmer);
        next()
    },
    components: {
        pubFoot,
        pubHead,
    },
    methods: {
        // 获取数据
        getData(){
            this.$loading();
            centers({
                token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
            }).then(res =>{
                Toast.clear();
                if(res.code == 1){
                    if(res.data.info.id){
                        // 已登录
                        this.hasUserInfo = true;
                        // 用户信息
                        this.userInfo = res.data.info;
						sessionStorage.setItem('customer_tel',res.data.customer_tel)
                        localStorage.setItem('userInfo',JSON.stringify(res.data.info))
                    }else{
						this.$tip('您的登录已失效,即将重新登录!');
						setTimeout(()=>{
							localStorage.clear();
							// sessionStorage.clear();
							window.location.href = 'http://mbgo.0791jr.com';
						},1200)
                    }
                    this.kefu = res.data.customer_tel
                }
            })
        },
		getOrderNum(){
			getOrderNum({
				token:localStorage.getItem('token') ? localStorage.getItem('token') : ''
			}).then(res=>{
				if(res.code==1){
					this.fukuan_1 = res.data.count10
					this.fukuan_2 = res.data.count20
					this.fukuan_3 = res.data.count40
					this.fukuan_4 = res.data.count50
				}
			})
		},
        // 去个人资料
        toInfos(){
            this.$router.push('/userInfo')
        },
        // 服务跳转
        toIndex(id){
            if(!localStorage.getItem('token') && id != 7){
                this.$tip('您还未登录，请先登录!');
                return
            }
            switch(id){
                case 1:
                    this.$router.push('/myCoupon');
                    break
                case 2:
                    this.$router.push('/collect');
                    break
                case 3:
                    this.$router.push('/address');
                    break
                case 4:
                    this.$router.push('/feedback');
                    break
                case 5:
                    Dialog.confirm({
                        title: this.kefu,
                        confirmButtonText: '呼叫',
                        confirmButtonColor: '#57B127',
                    }).then(res =>{
                        window.location.href = 'tel://'+ this.kefu
                    }).catch(err =>{

                    })
                    break
                case 6:
                    this.$router.push('/aboutUs');
            }
        },
        // 跳转到订单页面
        toOrder(id) {
            if(!localStorage.getItem('token')){
                this.$tip('您还未登录，请先登录!');
                return
            }
            this.$router.push('/myOrder?id='+id)
        },
        // 跳转到售后订单页面
        toAfter() {
            if(!localStorage.getItem('token')){
                this.$tip('您还未登录，请先登录!');
                return
            }
            this.$router.push('/afterOrder')
        },
        // 去分销中心
        toDis(id){
            if(!localStorage.getItem('token')){
                this.$tip('您还未登录，请先登录!');
                return
            }
            if(id == 1){
                this.$router.push('/myCollage?id=1');
                return
            }
            if(id == 2){
				this.$router.push('/feature?id=1');
                return
            }
            if(id == 3){
                this.$router.push('/mall');
                return
            }
            if(id == 4){
                if(this.hasMobile){
                    this.$router.push('/distribution');
                }else{
                    this.bindtel = true;
                }
                return
            }
        },
        // 会员码
        toCode(){
            this.$router.push('/inviteCode')
        },
        // 去登录
        toLogin(){
            this.$router.push('/login')
        },
		toTravel(){
			// this.$router.push('/travel')
			Dialog.alert({
			  title: '温馨提示',
			  message: '旅游达人模块正在建设中哦~',
			  confirmButtonColor:'#4DAD1A'
			}).then(() => {
			  // on close
			});
			
		},
        // 换绑手机号
        toBind(){
            // this.$router.push('/bindtel?tel='+this.userInfo.mobile_full)
        },
        // 获取验证码
        getCode(){
            if(!this.tel){
                this.$tip('请输入手机号!');
                return
            }
            if(!u_Reg(this.tel,'phone')){
                this.$tip('请输入正确的手机号!');
                return
            }

            if(this.once){
                this.once = false;
                this.$loading()
                sendMessage({
                    mobile: this.tel,
                    type: ''
                }).then(res =>{
                    Toast.clear();
                    this.$tip(res.msg);
                    this.msg = '60S';
                    this.cutDown(60)
                })
            }else{
                this.$tip('验证码已发送!');
            }

        },
        // 倒计时
        cutDown(time){
            this.timmer = setInterval(() =>{
                if(time > 0){
                    time--;
                    this.msg = time+'S';
                }else{
                    this.msg = '获取验证码';
                    this.once = true;
                    clearInterval(this.timmer);
                }
            },1000)
        },
        // 绑定手机号
        bindTel(){
            if(!this.tel){
                this.$tip('请输入手机号!');
                return
            }
            if(!u_Reg(this.tel,'phone')){
                this.$tip('请输入正确的手机号!');
                return
            }
            if(!this.code){
                this.$tip('请输入验证码!');
                return
            }

            if(this.oncea){
                this.oncea = false
                this.$loading();
                bindmobile({
                    mobile: this.tel,
                    code: this.code,
                    token: localStorage.getItem('token'),
                }).then(res =>{
                    Toast.clear();
                    this.oncea = true;
                    this.$tip(res.msg);
                    if(res.code == 1){
                        this.bindtel = false;
                        this.hasMobile = true;
						let data = JSON.parse(localStorage.getItem('userInfo'));
						data.mobile = this.tel;
						localStorage.setItem('userInfo',JSON.stringify(data))
                    }
                })
            }else{
                this.$tip('您点击的太快啦T_T');
            }
        },
    }
}
</script>
<style lang="less" scoped>
.footer{
    
}
.center_center{
    min-height: 100vh;
    background-color: #f5f5f5;
    .topper{
        width: 100%;
        max-width: 750px;
        height: 0.88rem;
        margin: 0 auto;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        background-color: transparent;
        font-size: 0.36rem;
        line-height: 0.88rem;
    }
    // 用户信息
    .top{
        height: 4rem;
        padding: 0.9rem 0.4rem 0;
        background: url('~@/assets/my_bg.png') no-repeat center;
        background-size: 100%;
        // 用户头像
        .user_ico{
            width: 1.34rem;
            height: 1.34rem;
            margin-bottom: auto;
            border-radius: 100%;
            border: 0.04rem solid #fff;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        // 用户信息
        .user_infos{
            min-height: 1.34rem;
            margin-left: 0.3rem;
            margin-bottom: auto;
            .name_box{
                height: 0.38rem;
                .oneline{
                    max-width: 3.6rem;
                    font-size: 0.36rem;
                    line-height: 0.38rem;
                    font-weight: bold;
                }
                .level_ico{
                    height: 0.38rem;
                    margin-left: 0.2rem;
                    margin-right: auto;
                    padding: 0 0.14rem 0 0.52rem;
                    border-radius: 0.1rem;
                    font-size: 0.24rem;
                    line-height: 0.38rem;
                    color: #FF4400;
                }
            }
            .tel{
                font-size: 0.26rem;
                line-height: 120%;
                color: #fff;
                .level{
                    height: 0.3rem;
                    margin-left: 0.2rem;
                    padding: 0 0.1rem;
                    font-size: 0.24rem;
                    line-height: 0.3rem;
                    color: #fff;
                    background:linear-gradient(270deg,rgba(232,180,69,1) 0%,rgba(240,201,115,1) 52%,rgba(232,179,67,1) 99%);
                    border-radius: 0.06rem;
                }
            }
            .user_id,.times{
                font-size: 0.22rem;
                line-height: 120%;
            }
        }
    }
    // 订单栏目
    .order_box{
        height: 1.18rem;
        padding: 0 0.3rem;
        position: relative;
        .order_acts{
            width: calc(100% - 0.6rem);
            height: 2.3rem;
            margin: 0 auto;
            position: absolute;
            z-index: 10;
            top: -1.12rem;
            left: 0;
            right: 0;
            border-radius: 0.1rem;
            background-color: #fff;
            .topic{
                height: 0.8rem;
                padding: 0 0.3rem;
                font-size: 0.3rem;
                line-height: 120%;
                font-weight: bold;
                color: #333;
                border-bottom: 0.01rem solid #f2f2f2;
                .all{
                    font-size: 0.22rem;
                    color: #999;
                }
            }
            .acts{
                .act{
                    img{
                        max-width: 0.58rem;
                        max-height: 0.46rem;
                    }
                    p{
                        margin-top: 0.2rem;
                        font-size: 0.22rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
				.icon-da{
					position: relative;
					.icon-xiao{
						position :absolute;
						top: 0.12rem;
						right: 0.5rem;
						width: 0.3rem;
						height: 0.3rem;
						border: 0.02rem solid #4CA71C;
						border-radius: 100%;
						text-align: center;
						line-height: 0.3rem;
						color: #4CA71C;
						font-size: 0.18rem;
						background:#fff;
						
					}
				}
            }
        }
    }
    .pd3{
        padding: 0 0.3rem;
        // 分销中心
        .distribution{
            width: 100%;
            height: 2.3rem;
            margin: 0.2rem auto 0;
            border-radius: 0.1rem;
            background-color: #fff;
            .topic{
                height: 0.8rem;
                padding: 0 0.3rem;
                font-size: 0.3rem;
                line-height: 120%;
                font-weight: bold;
                color: #333;
                border-bottom: 0.01rem solid #f2f2f2;
                .all{
                    font-size: 0.22rem;
                    color: #999;
                }
            }
            .acts{
                .act{
                    img{
                        max-width: 0.58rem;
                        max-height: 0.46rem;
                    }
                    p{
                        margin-top: 0.2rem;
                        font-size: 0.22rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
            }
        }
        // 邀请好友
        .invite{
            height: 1.6rem;
            margin-top: 0.2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        // 更多服务
        .services{
            margin-top: 0.2rem;
            border-radius: 0.1rem;
            background-color: #fff;
            .title{
                height: 0.8rem;
                padding: 0 0.3rem;
                font-size: 0.3rem;
                line-height: 120%;
                font-weight: bold;
                color: #333;
                border-bottom: 0.01rem solid #f2f2f2;
            }
            .services_list{
                padding-bottom: 0.3rem;
                .service{
                    width: 25%;
                    height: 1rem;
                    margin: 0.2rem 0 0;
                    font-size: 0.24rem;
                    line-height: 120%;
                    color: #333;
                    img{
                        max-width: 0.54rem;
                        max-height: 0.44rem;
                    }
                    p{
                        margin-top: 0.1rem;
                    }
                }
            }
        }
    }
    // 绑定手机号弹窗
    .bind_tel_box{
        width: 100%;
        background-color: transparent;
        .bind_tel{
            width: 80%;
            margin: auto;
            padding: 0.6rem 0.3rem;
            border-radius: 0.2rem;
            background-color: #53AB2A;
            .title{
                font-size: 0.36rem;
                line-height: 120%;
            }
            .bind_init{
                width: 100%;
                height: 0.8rem;
                margin-top: 0.3rem;
                padding: 0 0.3rem;
                border-radius: 0.4rem;
                background-color: #fff;
                overflow: hidden;
                .name{
                    width: 1.12rem;
                    font-size: 0.28rem;
                    line-height: 120%;
                    color: #333;
                }
                input{
                    width: 2rem;
                    height: 0.6rem;
                    margin: auto 0;
                    font-size: 0.28rem;
                    line-height: 0.6rem;
                    color: #333;
                    background-color: transparent;
                }
                .get_code{
                    width: 2rem;
                    height: 0.5rem;
                    margin: auto 0;
                    border-radius: 0.3rem;
                    font-size: 0.26rem;
                    line-height: 0.5rem;
                    color: #fff;
                    background-color: #53AB2A;
                }
            }
            .bind_btn{
                width: 100%;
                height: 0.8rem;
                margin-top: 0.64rem;
                font-size: 0.32rem;
                line-height: 0.8rem;
                color: #333;
                border-radius: 0.4rem;
                background-color: #fff;
            }
        }
    }
	.footer-text{
		color: #969799;
		font-size: 0.26rem;
		line-height: 1rem;
		text-align: center;
	}
	
}
</style>